<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>采购表</title>
    <link rel="stylesheet" href="/webjars/element-ui/2.15.13/lib/theme-chalk/index.css">
    <script src="/webjars/vue/2.6.14/dist/vue.js"></script>
    <script src="/webjars/element-ui/2.15.13/lib/index.js"></script>
    <script src="/webjars/axios/1.6.2/dist/axios.js"></script>
</head>
<style>
    body{
        background-color: white;
    }
</style>
<body>

<div id="root">
    <template>
        <el-header style="height: 30%">
            <el-form inline>
                <el-form-item label="零件名称">
                    <el-input v-model="vo.chasename"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-date-picker
                            v-model="searchdate"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="yyyy-MM-dd"
                            @change="allot">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search">查询</el-button>
                    <el-button type="warning" @click="insert">入库</el-button>
                    <el-button plain icon="el-icon-printer" @click="exprort" circle></el-button>
                </el-form-item>
            </el-form>
        </el-header>
        <el-table :data="selectList.data" border @selection-change="changeSelection" stripe>
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="chaseId" label="编号"></el-table-column>
            <el-table-column prop="chaseName" label="零件名称"></el-table-column>
            <el-table-column prop="chasePrice" label="零件价格"></el-table-column>
            <el-table-column prop="chaseNumber" label="零件数量"></el-table-column>
            <el-table-column prop="name" label="采购人员"></el-table-column>
            <el-table-column prop="chaseType" label="购买途径"></el-table-column>
            <el-table-column prop="chaseRepertory" label="现有库存"></el-table-column>
            <el-table-column prop="chaseCount" label="总价格"></el-table-column>
            <el-table-column prop="chaseState" label="入库状态">
                <template slot-scope="scope">
                    <span>
                        {{scope.row.chaseState == 0 ? '已入库' : '未入库'}}
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="chaseDate" label="采购时间"></el-table-column>
        </el-table>
        <!--        分页-->
        <el-pagination
                :page-sizes="[3,6,9]"
                :current-page.sync="vo.pageNo"
                :page-size.sync="vo.pageSize"
                @current-change="search"
                @size-change="search"
                background
                layout="prev, pager, next,sizes"
                :total="selectList.count">
        </el-pagination>
    </template>
</div>
<script>
    new Vue({
        el: "#root",

        data: {
            searchdate: [],
            selectList: [],
            chaseIds: [],
            datalist: {},
            vo: {
                chasename: "",
                pageNo: 1,
                pageSize: 6,
                startdate: '',
                overdate: '',
            },
            listrukudata:[]
        },
        methods:{
            exprort(){
                window.location.href="/pur/exportPdf";
            },
            search() {
                this.allot();
                axios.get("/pur/selectList", {params: this.vo})
                    .then(({data}) => {
                        this.selectList = data;
                    })
                this.searchdate = '';
                this.vo.startdate = '';
                this.vo.overdate = ''
            },
            ruku() {
                axios.post("/pur/add", this.datalist)
                    .then(({data}) => {
                        this.$message({
                            message: data.msg,
                            type: data.code == 200 ? 'success' : 'error'
                        });
                        this.search();
                    })
            },
            insert() {
                if (this.chaseIds.length == 0) {
                    this.$alert("请至少选择一项待入库！", "消息提示");
                    return;
                }
                let counts = 0;
                this.listrukudata.forEach(item=>{
                    axios.get("/pur/selectname?name=" + item.chaseName)
                        .then(({data}) => {
                            counts = data.data;
                            if (counts == 0) {
                                this.datalist=item;
                                this.ruku();
                            } else {
                                axios.put("/pur/caiedit", item)
                                    .then(({data}) => {
                                        this.$message({
                                            message: data.msg,
                                            type: data.code == 200 ? 'success' : 'error'
                                        });
                                        this.search();
                                    })
                            }
                        })
                })

            },
            changeSelection(arr) {
                this.listrukudata = arr;
                this.datalist = arr[0];
                this.chaseIds = arr.map(chase => chase.chaseId);
            },
            allot() {
                this.vo.startdate = this.searchdate[0];
                this.vo.overdate = this.searchdate[1];
            }
        },
        mounted() {
            this.search();
        }
    });
</script>
</body>
</html>